<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
    <div id="app">

        <h1>{{msg}}</h1>


    </div>
</body>
</html>
<!--引入vue-->
<script src="js/vue.js"></script>
<!--引入axios-->
<script src="js/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"es6语法解析"
        }
    });

    //es6 新特性:   Ecmascript5 ===> es5  Ecmascript6 ====> es6  javascript6.x 语法

    //1.变量声明     var 、let 、const
    // var 使用这个关键字声明变量是全局变量,出现变量混淆
    // let 作用:用来声明一个局部变量  作用范围:从定义出开始,到定义的代码块结束  [推荐]
    // const 作用: 用来定义一个常量  作用: 变量一旦被定义不能被修改  特殊说明:修饰number 字符串 时变量的值不能修改  修饰对象的时候对象的地址不能修改

    function test(){
        for(let i=0;i<10;i++){
            console.log("function inner: ",i)
        }
        //console.log("function out: ",i)
        const name = "xiaochen"; //常量

        const user = {name:"小三"}; //const修饰对象: 对象地址不能改变 对象中属性值可以随意修改
        console.log(user.name);
        user.name="小明";
        console.log(user.name);

    }

    test();//调用函数


    //2.字符串模板   通过反引号使用字符串模板 ``
    let html = "<div>\n" +
        "            <h1>我是标签</h1>\n" +
        "            <input type=\"text\" name=\"name\">\n" +
        "            <button>我是按钮</button>\n" +
        "        </div>";

    let html1 = `<div>
                    <h1>我是标签</h1>
                    <input type="text" name="name">
                    <button>我是按钮</button>
                </div>`;

    console.log(html);
    console.log(html1);


    //3.es6  function(){}  注意:匿名函数存在自己this  简化写法  ()=>{}  箭头函数  注意:箭头函数没有自己this


    //4.es5 对象定义方式    es6中对象的扩展:  当对象属性名和属性赋值变量名一致时,可以省略变量名不写
    let name = "小陈";
    let age = 23;
    let bir = "2012-12-12"
    const user = {name:name,age:age,bir:bir}  //es5
    console.log(user);

    const stu = {name,age,bir};//es6  属性名和赋值变量名一致,省略不写赋值变量名
    console.log(stu);


</script>